import React, { useState, useEffect } from "react";

export default (): JSX.Element => {
  const init = () => {
    // 字符串方法都不会改变原字符串
    let str = '   123456abcdef   '
    console.log('length：', str.length) // 字符串长度
    // 查找
    console.log('includes：', str.includes('1')) // 是否存在，返回boolean
    console.log('indexOf：', str.indexOf('abc')) // 查找字符串 返回首次出现的位置（没有为-1）
    console.log('lastIndexOf：', str.lastIndexOf('')) // 查找字符串 返回最后一次出现的位置（没有为-1）
    console.log('search：', str.search(/45/)) // 返回匹配到的字符串的位置（没有为-1）和indexOf、lastIndexOf不同的是可以使用正则
    // 截取
    console.log('slice：', str.slice(3, 10), str.slice(-10, -3), str) // 截取开始到结束位置的字符串，负数则从尾部开始计算，单个数字则从当前位置到最后
    console.log('substr：', str.substr(4, 5), str.substr(-4, 5), str) // 截取从当前位置开始的几个字符串,可以使用负数
    console.log('substring：', str.substring(3, 10), str.substring(3), str) // 截取开始到结束位置的字符串，无法使用负数，单个数字则从当前位置到最后
    // 替换
    console.log('replace：', str.replace('12', '78'), str.replace(/12/, '78'), str) // 返回一个新的值,可以正则
    console.log('toLowerCase, toUpperCase：', str.toLowerCase(), str.toUpperCase(), str) // 转换大小写
    // 运算
    console.log('concat：', str.concat('123', '456'), str) // 等同于数组的concat
    // 删除空白字符
    console.log('trim：', str.trim()) // 删除空白字符
    // 提取字符串
    console.log('charAt：', str.charAt(3), str) // 返回指定下标的字符串
    console.log('charCodeAt：', str.charCodeAt(3), str) // 返回指定索引字符的unicode编码
    // 属性访问
    console.log(str[10]) // 不能str[10] = 'K'
    // 转化字符串成数组
    console.log(str.split('')) // 转化字符串成数组
    // 填充字符串<后面开始以及前面开始>
    console.log(str.padEnd(30, '0'), str.padStart(30, '0'))
  }
  useEffect(() => {
    init()
  }, []);
  return <div>字符串</div>;
};
